<!-- 门诊医生 -->
<template>
    <div>
      <!-- 搜索栏 ： 两个搜索框  搜索按钮  添加挂号按钮  批量删除   -->
       <h2 style="font-size:16px">精准搜索</h2>
      <el-row>
        <el-col :span="1"></el-col>
        <el-col :span="4">
             <el-input placeholder="请输入病历号" v-model="query.caseNumber"/>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="4">
                <el-input placeholder="请输入姓名" v-model="query.realName"/>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="2">
                <el-button type="primary" plain @click="getByPage">搜索</el-button>
        </el-col>
      </el-row>
  
  
      <h2 style="font-size:16px">按条件筛选</h2>
      <el-row>
        <el-col :span="1"></el-col>
        <el-col :span="4">
          <!-- 1-已挂号 2-医生接诊 3-看诊结束 4-已退号 -->
             <el-select placeholder="挂号状态" v-model="query.visitState" clearable>
                  <el-option label="挂号状态" :value="null"></el-option>
                  <el-option label="已挂号" :value="1"></el-option>
                  <el-option label="医生接诊" :value="2"></el-option>
                  <el-option label="看诊结束" :value="3"></el-option>
                  <el-option label="已退号" :value="4"></el-option>
             </el-select>
        </el-col>
        <el-col :span="4">
              <el-date-picker
                  v-model="query.visitDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="挂号日期"
                  clearable
              />
        </el-col>
        <el-col :span="4">
          <el-select
              v-model="query.departmentId"
              placeholder="挂号科室"
              clearable
          >
              <el-option :value="null" label="挂号科室"></el-option>
              <el-option v-for="dept in departmentList" 
                              :key="dept.id" 
                              :label="dept.deptName" 
                              :value="dept.id" />
          </el-select>
        </el-col>
        
        <el-col :span="2">
                <el-button type="primary" plain @click="getByPage">搜索</el-button>
          </el-col>
        
      </el-row>
  
      <!-- 表格 -->
      <el-row>
        <el-col :span="22">
            
          <el-table :data="pb.records" 
                    stripe 
                    border
                    >
            <el-table-column type="index" width="50" />
            <el-table-column prop="caseNumber" label="病历号" width="100px"/>
            <el-table-column prop="realName" label="姓名" width="80px"/>
            <el-table-column label="挂号状态" width="120px">
              <template #default="scope">
                  <span style="color:green" v-if="scope.row.visitState==1"> 已挂号 </span>
                  <span style="color:red" v-else-if="scope.row.visitState==2"> 医生接诊 </span>
                  <span style="color:blue" v-else-if="scope.row.visitState==3"> 看诊结束 </span>
                  <span style="color:gray" v-else-if="scope.row.visitState==4"> 已退号 </span>
              </template>
            </el-table-column>
            <el-table-column prop="visitDate" label="挂号时间" width="120px"/>
            <el-table-column prop="cardNumber" label="身份证号码" width="180px"/>
          
            <el-table-column label="操作" width="250px">
                  <template #default="scope">
                    <el-button 
                      size="small" 
                      v-show="scope.row.visitState==1"
                      @click="createMedicalRecord(scope.row)">
                      创建病案
                    </el-button>
                    <el-button 
                      size="small" 
                      v-show="scope.row.visitState==2"
                      @click="showMedicalRecord(scope.row)">
                      查看病案
                    </el-button>
                    <el-button
                      size="small"
                      type="danger"
                      @click="ElMessage.success('已叫号')"
                    >
                      叫号
                    </el-button>
                    <el-button
                      size="small"
                      type="danger"
                      @click="showRegInfo(scope.row)"
                    >
                      查看
                    </el-button>
                  </template>
                </el-table-column>
          </el-table>
            
        </el-col>
        
      </el-row>  
      <!-- 分页组件 -->
      <el-row>
        <el-col :span="6"></el-col>
        <el-col :span="12">
             <el-pagination
                  v-model:current-page="query.current"
                  v-model:page-size="query.size"
                  :page-sizes="[5, 8, 10, 20]"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pb.total"
                  @size-change="getByPage"
                  @current-change="getByPage"
                />
        </el-col> 
      </el-row>  
  
    <!-- 显示挂号信息 -->
    <!-- <el-dialog v-model="dialogInfoVisible" title="挂号信息详情" width="500" draggable>
       <div>{{regInfo}}</div>
    </el-dialog> -->

    <!-- 显示挂号信息 -->
 <el-dialog v-model="dialogInfoVisible" title="挂号信息详情" width="500" draggable>
	 <div>
    <el-form :model="form">
		  <el-form-item label="病历号" :label-width="formLabelWidth" >
			  <el-input v-model.trim="form.caseNumber" autocomplete="off" readonly/>
		  </el-form-item>
		  <el-form-item label="性别" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.gender" autocomplete="off" readonly/>
		  </el-form-item>
		  <el-form-item label="身份证号" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.cardNumber" autocomplete="off" readonly/>
		  </el-form-item>
		  <el-form-item label="出生日期" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.birthday" autocomplete="off" readonly/>
		  </el-form-item>
		  <el-form-item label="年龄" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.age" autocomplete="off" readonly/>
		  </el-form-item>
		  <el-form-item label="家庭住址" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.homeAddress" autocomplete="off" readonly/>
		  </el-form-item>
		  <el-form-item label="看诊时间" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.visitDate" autocomplete="off" readonly/>
		  </el-form-item>
		  <el-form-item label="午别" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.noon" autocomplete="off" readonly/>
		  </el-form-item>
		  <el-form-item label="病历本" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.isBook" autocomplete="off" readonly/>
		  </el-form-item>
		  <el-form-item label="结算方式" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.registMethod" autocomplete="off" readonly/>
		  </el-form-item>
		  <!-- 这里显示成文字的状态 -->
		   <!-- 在拿到数据的时候进行改变 -->
		  <el-form-item label="看诊状态" :label-width="formLabelWidth">
				<el-input v-model.trim="form.dialogVisitState" autocomplete="off" readonly />
		  </el-form-item>
		  <el-form-item label="看诊科室" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.department.deptName" autocomplete="off" readonly/>
		  </el-form-item>
		  <el-form-item label="医生名称" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.employee.realname" autocomplete="off" readonly/>
		  </el-form-item>
		  <el-form-item label="号别" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.registLevel.registName" autocomplete="off" readonly/>
		  </el-form-item>
		  <el-form-item label="结算类别" :label-width="formLabelWidth">
		  	  <el-input v-model.trim="form.settleCategory.settleName" autocomplete="off" readonly/>
		  </el-form-item>
		</el-form>
   </div>
  </el-dialog>
      
    </div>
  </template>
  
  <script setup>
  //引入http请求的通用方法
  import httpRequest from '../../common/index.js';
  import { onMounted, ref, getCurrentInstance } from 'vue';
  import { ElMessage,ElMessageBox } from 'element-plus';
  import { nanoid } from 'nanoid';
  import { Plus } from '@element-plus/icons-vue'
import store from '@/store/index.js';
  
    let {proxy} = getCurrentInstance();
  
    let baseUrl = proxy.$baseUrl;
  
  
      //所有门诊科室的列表
      const departmentList = ref([])
  
      //查询所有门诊科室
      const getDeptByType = ()=>{
          httpRequest(
              proxy,
              'get',
              '/department/type/门诊',
              null,
              (resultBean)=>{
                  departmentList.value = resultBean.data;
              }
          )
      }
  
      // //去新增挂号页面
      // const toAddReg = ()=>{
      //     proxy.$router.push('/main/regfee/AddRegister')
      // }
  
      //跳转页面到病例填写的页面
      const showMedicalRecord = (row)=>{
          proxy.$router.push('/main/outpatient/MedicalRecord/'+row.id+"/"+row.realName);
      }
  
      //创建病案
      const createMedicalRecord = (row)=>{

        proxy.$axios({
          method:'get',
          url:'/medicalrecord/register/'+row.id,
        }).then(res=>{
          let resultBean = res.data;
          if(resultBean.data == null){
              httpRequest(
                          proxy,
                          'post',
                          '/medicalrecord',
                          {
                              registerId: row.id
                          },
                          resultBean=>{
                              ElMessage.success('病例创建成功');
                              //更改挂号状态为2  医生接诊 
                          }
                      )
          }
                console.log("跳转页面");
                changeVisitState(row,2);
                 //跳转到病案填写页面  MedicalRecord
                 store.state.mrActiveTab = 'recordIndex';
                 proxy.$router.push('/main/outpatient/MedicalRecord/'+row.id+"/"+row.realName);
        })
      }
  
  
      //修改挂号状态
      const changeVisitState = (row,visitState)=>{
          httpRequest(
              proxy,
              'put',
              '/register/change/state',
              {
                  id: row.id,
                  visitState: visitState
              },
              resultBean=>{
                  row.visitState = visitState;
                  ElMessage.success('接诊成功');
              }
          )
      }
  
      //挂号信息弹窗是否显示
      const dialogInfoVisible = ref(false);

      //表单数据 添加和修改
  let form = ref({
      caseNumber:'',
        //患者的真实姓名
        realName:'',
        gender:'',
        cardNumber:'',
        birthday:'',
        age:null,
        homeAddress:'',
        visitDate:'',
        noon:'',
        isBook:'',
        registMethod:'',
        //这里进行判断一下，类型的文字进行显示出来
        visitState:'',
        deptName:'',
        //看病医生的姓名
        realname:'',
        registName:'',
        //谁来缴费
        settleName:'',
        dialogVisitState:null
  })
  
      //@TODO  显示弹窗展示挂号信息
      const showRegInfo = (row)=>{
        form.value=row;
        if(form.value.visitState==1) {
          form.value.dialogVisitState='已挂号';
        } else if(form.value.visitState==2) {
          form.value.dialogVisitState='医生接诊'
        } else if(form.value.visitState==3) {
          form.value.dialogVisitState='看诊结束'
        } else {
          form.value.dialogVisitState='已退号'
        }
        dialogInfoVisible.value = true;
      }
  
    const getNow = ()=>{
      let now = new Date();
      query.value.visitDate = now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate();
    }
  
    //分页+搜索条件
    let query = ref({
        current: 1,
        size: 5,
        realName: '',
        caseNumber: '',
        departmentId: null,
        visitDate: '',
        visitState: 2,
        employeeId: 1 //@TODO  动态查询当前登录的医生的id值
    })
    
    //分页对象 total  pages  data(集合)
    let pb = ref({
        total: 0,
        pages: 0,
        records: []
    })
  
    //分页查询挂号信息
    const getByPage = ()=>{
  
      httpRequest(
              proxy,
              'post',
              '/register/page',
              query.value,
              (resultBean)=>{
                  pb.value = resultBean.data;
              })
    }  
    onMounted(()=>{
      getNow();
      getByPage();
      getDeptByType();
       
    })
  
  
  </script>
  
  <style scoped>
      .avatar-uploader .avatar {
        width: 100px;
        height: 100px;
        display: block;
      }
  </style>
  
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
  }
  </style>